<template>
    <div class="icon-index">
        <div
            :class="{
                item: true,
                click: clickFlag
            }"
            v-for="item in props.list"
            :key="item.name"
            :style="`width:${100 / row}%`"
        >
            <div class="content">
                <div class="left">
                    <img :src="item.icon" alt="" />
                </div>
                <div class="right">
                    <div class="right-top">
                        {{ item.name }}
                    </div>
                    <div class="right-bottom">
                        <div class="count" :style="item.color ? `color:${item.color};` : ''">
                            {{ item.count }}
                        </div>
                        <div class="unit">{{ item.unit }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { getAssetsFile } from '@/utils'
interface itemType {
    name: string
    count: number
    unit: string
    icon: any
    color?: string
    info?: string
}

const props = defineProps({
    list: {
        type: Array<itemType>,
        default: () => {
            return [
                {
                    name: '风向',
                    count: '东南',
                    unit: '',
                    icon: getAssetsFile('icon/风向.png')
                },
                {
                    name: '风速',
                    count: 46,
                    unit: 'm/s',
                    icon: getAssetsFile('icon/风速.png')
                },
                {
                    name: '温度',
                    count: 80,
                    unit: '°C',
                    icon: getAssetsFile('icon/温度.png')
                },
                {
                    name: '湿度',
                    count: 26,
                    unit: '%rh',
                    icon: getAssetsFile('icon/湿度.png')
                }
            ]
        }
    },
    row: {
        type: Number,
        default: 4
    },
    clickEvent: {
        type: Function,
        default: () => {
            return true
        }
    }
})

const clickFlag = computed(() => {
    try {
        if (props.clickEvent()) {
            return false
        } else {
            return true
        }
    } catch (error) {
        return true
    }
})
</script>

<style lang="scss" scoped>
.icon-index {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .item {
        width: 50%;
        padding: 0 10px 10px;
        .content {
            width: 100%;
            display: flex;
            align-items: center;
            height: 100px;
        }
        .left {
            width: 120px;
            height: 80px;
            background: url('./image/itemIcon_style1bg@2x.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 15px;
            img {
                width: 28px;
            }
        }
        .right {
            padding-left: 5px;
            width: 150px;
            .right-top {
                font-size: 14px;
                font-family: 'OPPOSans';
                letter-spacing: 1px;
                color: rgba($color: #e4ebf9, $alpha: 1);
                opacity: 0.5;
                margin-bottom: 5px;
            }
            .right-bottom {
                display: flex;
                align-items: center;
                .count {
                    font-family: SJyunhei, serif;
                    color: #fff;
                    font-size: 28px;
                    margin-bottom: 3px;
                }
                .unit {
                    font-size: 14px;
                    padding-left: 10px;
                    font-family: 'OPPOSans';
                    letter-spacing: 1px;
                    color: #fff;
                }
            }
        }
    }

    .click {
        cursor: pointer;
        transition: all 0.2s;
        &:hover {
            background: #86dbff11;
        }
    }
}
</style>
